<template>
    <div class="main">
        <section>
            <div class="block-header"><div>基本信息</div></div>
            <el-form class="section-content" :model="baseData" :rules="commonRules"  size="medium" ref="form"  label-width="200px">
                <el-row >
                    <el-col :span="12">
                        <el-form-item label="合同签约方：" prop="contractingPartyName" :rules="commonRules.notNullRule">
                            <el-input placeholder="请输入合同签约方" v-model="baseData.contractingPartyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纳税人识别号:" prop="taxpayerIdentifyNo" :rules="commonRules.notNullRule" >
                            <el-input placeholder="纳税人识别号" v-model="baseData.taxpayerIdentifyNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开户银行：" prop="openBank" :rules="commonRules.notNullRule">
                            <el-input placeholder="开户银行" v-model="baseData.openBank"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="银行账户：" prop="bankAccount" :rules="commonRules.notNullRule">
                            <el-input placeholder="银行账户"  v-model="baseData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="注册地址：" prop="registerAddress" :rules="commonRules.notNullRule">
                            <el-input placeholder="注册地址" v-model="baseData.registerAddress" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="注册电话：" prop="registerPhone" :rules="commonRules.notNullRule">
                            <el-input placeholder="注册电话" v-model="baseData.registerPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="税率：" prop="taxRate" :rules="commonRules.notNullRule">
                            <el-input placeholder="税率" v-model="baseData.taxRate">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="发票余量请求地址：" prop="invoiceUrl" :rules="commonRules.notNullRule">
                            <el-input placeholder="发票余量请求地址" v-model="baseData.invoiceUrl"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否营改增：" prop="businessToAddedStatus" :rules="commonRules.notNullRule">
                            <el-radio-group v-model="baseData.businessToAddedStatus">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="签约类型：" prop="contractingPartyType" :rules="commonRules.notNullRule">
                            <el-radio-group v-model="baseData.contractingPartyType">
                                <el-radio label="SMALL_TAXPAYER">小规模/仅简易征收</el-radio>
                                <el-radio label="GENERAL_TAXPAYER">一般纳税人</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="12">
                        <el-form-item label="购买方开票信息是否必填：" prop="makeInvoiceStatus" :rules="commonRules.notNullRule">
                            <el-radio-group v-model="baseData.makeInvoiceStatus">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="是否有效:" prop="enable" :rules="commonRules.notNullRule">
                            <el-radio-group v-model="baseData.enable">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开票系统:" prop="interactedSystems" :rules="commonRules.notNullRule">
                             <el-checkbox-group v-model="baseData.interactedSystems">
                                <el-checkbox :label="systems.code" v-for="(systems,index) in systemsList" :key="index">{{systems.desc}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button type="primary" style="margin-bottom:20px;" @click="addConfigs">新增功能配置</el-button>
                <el-row v-for="(item,index) in baseData.contractingPartyConfigs" :key="index">
                    <div class="block-header" ><div>功能配置{{index+1}}</div></div>
                    <el-col :span="12">
                        <el-form-item label="发票功能：" :prop="`contractingPartyConfigs[${index}].invoiceType`" :rules="commonRules.notNullRule">
                            <el-select v-model="item.invoiceType" placeholder="请选择" :disabled="true">
                                <el-option v-for="(invoiceType,index) in invoiceTypeList" :key="index" :label="invoiceType.name" :value="invoiceType.id" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="是否生效:" >
                            <el-button type="primary" v-if="item.enable===1">已生效</el-button>
                            <el-button type="info" v-if="item.enable===0" @click="setFlag(index)">设为生效</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开票限额:" :prop="`contractingPartyConfigs[${index}].invoiceQuotaType`" :rules="commonRules.notNullRule">
                            <el-select v-model="item.invoiceQuotaType" placeholder="请选择">
                                <el-option
                                v-for="(invoiceQuotaType,index) in invoiceQuotaTypes"
                                :key="index"
                                :label="invoiceQuotaType.desc"
                                :value="invoiceQuotaType.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发票量：" :prop="`contractingPartyConfigs[${index}].invoiceTotal`" :rules="commonRules.notNullRule" >
                            <el-input placeholder="发票量" v-model="item.invoiceTotal" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="待开票量：" :prop="`contractingPartyConfigs[${index}].waitInvoiceTotal`" :rules="commonRules.notNullRule">
                            <el-input placeholder="待开票量" v-model="item.waitInvoiceTotal"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="百旺余量：" :prop="`contractingPartyConfigs[${index}].bwRemainInvoiceTotal`" :rules="commonRules.notNullRule">
                            <el-input placeholder="百旺余量" v-model="item.bwRemainInvoiceTotal"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收款人：" :prop="`contractingPartyConfigs[${index}].receiver`" :rules="commonRules.notNullRule">
                            <el-input placeholder="收款人" v-model="item.receiver"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开票人：" :prop="`contractingPartyConfigs[${index}].drawer`" :rules="commonRules.notNullRule">
                            <el-input placeholder="开票人" v-model="item.drawer" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="复核人："  :prop="`contractingPartyConfigs[${index}].reviewer`" :rules="commonRules.notNullRule" >
                            <el-input placeholder="复核人" v-model="item.reviewer" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="textareaH">
                        <el-form-item label="手机号：" :prop="`contractingPartyConfigs[${index}].warnPhone`" :rules="commonRules.notNullRule">
                            <el-input placeholder="手机号,多个用逗号(英文状态下)隔开"  type="textarea" resize="none" v-model="item.warnPhone" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="textareaH">
                        <el-form-item label="电子邮箱：" :prop="`contractingPartyConfigs[${index}].warnEmail`" :rules="commonRules.notNullRule">
                            <el-input placeholder="电子邮箱,多个用逗号(英文状态下)隔开"  type="textarea" resize="none" v-model="item.warnEmail"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="textareaH">
                        <el-form-item label="备注：" :prop="`contractingPartyConfigs[${index}].remark`" :rules="commonRules.notNullRule">
                            <el-input placeholder="备注"  type="textarea" resize="none" v-model="item.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="block-header"><div>修改记录</div></div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="新建人:" >
                            <span v-if="baseData.id">{{baseData.createOperator}}</span>
                            <span v-else>{{$store.getters.user.realname}}</span>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12" v-if="baseData.id">
                        <el-form-item label="新建时间:" >
                            <span>{{baseData.createAt}}</span>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="修改人:" >
                            <span>{{$store.getters.user.realname}}</span>
                        </el-form-item>
                    </el-col>
                     <!-- <el-col :span="12">
                        <el-form-item label="修改时间:" >
                            <span>2019-8-5 21:30</span>
                        </el-form-item>
                    </el-col>  -->
                </el-row>
            </el-form>
            <div class="footer-block">
              <el-button type="primary" @click="save">确定</el-button>
              <el-button @click="$router.push({path: '/invoive/contractingParty'})">取消</el-button>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        return {
            baseData:{
                bankAccount:'',
                businessToAddedStatus:0,
                contractingPartyName:'',
                contractingPartyType:'SMALL_TAXPAYER',
                id:'',
                // makeInvoiceStatus:0,
                openBank:'',
                operator:this.$store.getters.user.realname,
                registerAddress:'',
                registerPhone:'',
                taxRate:'',
                taxpayerIdentifyNo:'',
                enable:0,
                invoiceUrl:'http://172.16.6.80:8899/',
                interactedSystems:[],
                contractingPartyConfigs:[{
                    bwRemainInvoiceTotal:'',
                    enable:1,
                    drawer:'',
                    id:'',
                    invoiceTotal:'',
                    invoiceQuotaType:'',
                    invoiceType:'ELECTRONIC_INVOICE',
                    operator:this.$store.getters.user.realname,
                    remark:'',
                    reviewer:'',
                    waitInvoiceTotal:'',
                    warnEmail:'',
                    warnPhone:'',
                    receiver:''
                }]
            },
            systemsList:[],
            invoiceTypeList:[{
                id:'ELECTRONIC_INVOICE',
                name:'电子票'
            },
            // {
            //     id:'PAPER_INVOICE',
            //     name:'纸质票'
            // }
            ],
            invoiceQuotaTypes:[],
            interactedSystemsId:[]
        }
    },
    created() {
        if(this.$route.query.id) {
            this.baseData.id = this.$route.query.id
            this.getDetails()
        } else {
            this.baseData.id = ''
            this.interactedSystemsId = []
        }
        this.getSystems()
        this.getInvoiceQuotaTypes()
    },
    methods:{
        getSystems() {
            this.request({
                url: '/invoice-web-manage/invoice/contracting-party/systems',
                method: 'GET'
            }).then((res) => {
                this.systemsList= res.data
            }).catch(err => {
                console.log(err)
                this.systemsList = []
            })
        },
        getInvoiceQuotaTypes() {
            this.request({
                url: '/invoice-web-manage/invoice/contracting-party/invoiceQuotaTypes',
                method: 'GET'
            }).then((res) => {
                this.invoiceQuotaTypes= res.data
            }).catch(err => {
                console.log(err)
                this.invoiceQuotaTypes = []

            })
        },
        addConfigs() {
            this.baseData.contractingPartyConfigs.push({
                bwRemainInvoiceTotal:'',
                enable:0,
                drawer:'',
                id:'',
                invoiceTotal:'',
                invoiceQuotaType:'',
                invoiceType:'ELECTRONIC_INVOICE',
                operator:'',
                remark:'',
                reviewer:'',
                waitInvoiceTotal:'',
                warnEmail:'',
                warnPhone:'',
                receiver:''
            })
        },
        save() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return false
                }
                let baseData = {...this.baseData}
                let interactedSystems = []
                //修改时保存的时候开票系统数据处理
                // if(baseData.id) {
                for(var i=0;i<baseData.interactedSystems.length;i++) {
                  let isExist = false
                  for(var j=0;j<this.interactedSystemsId.length;j++) {
                    if(baseData.interactedSystems[i]===this.interactedSystemsId[j].systemCode) {
                      interactedSystems.push({
                        id:this.interactedSystemsId[j].id,
                        operator:this.$store.getters.user.realname,
                        systemCode:this.interactedSystemsId[j].systemCode,
                        systemName:this.interactedSystemsId[j].systemName
                      })
                      isExist = true
                      break
                    }
                  }
                  if (!isExist) {
                    for(var j=0;j<this.systemsList.length;j++) {
                      if(baseData.interactedSystems[i] === this.systemsList[j].code) {
                        interactedSystems.push({
                          id:'',
                          operator:this.$store.getters.user.realname,
                          systemCode:this.systemsList[j].code,
                          systemName:this.systemsList[j].desc
                        })
                        break
                      }
                    }
                  }
                }
                    //新建时保存的时候开票系统数据处理
                // } else {
                //     for(var i=0;i<baseData.interactedSystems.length;i++) {
                //         for(var j=0;j<this.systemsList.length;j++) {
                //             if(baseData.interactedSystems[i]===this.systemsList[j].code) {
                //                 interactedSystems.push({
                //                     id:'',
                //                     operator:this.$store.getters.user.realname,
                //                     systemCode:this.systemsList[j].code,
                //                     systemName:this.systemsList[j].desc
                //                 })
                //             }
                //         }
                //     }
                // }

                baseData.interactedSystems = interactedSystems
                baseData.operator = this.$store.getters.user.realname
                this.request({
                    url: '/invoice-web-manage/invoice/contracting-party/info/save',
                    method: 'post',
                    data:baseData
                }).then((res) => {
                    if(res.code===200) {
                      this.$message({
                        type: 'success',
                        message: '保存成功',
                        onClose: () => {
                          this.$router.push({path: '/invoive/contractingParty'})
                        }
                      })
                    }
                }).catch(err => {
                    console.log(err)
                })
            })

        },
        setFlag(index) {
            console.log(index)
            for(var i =0;i<this.baseData.contractingPartyConfigs.length;i++) {
                if(i===index) {
                    this.baseData.contractingPartyConfigs[index].enable = 1
                } else {
                    this.baseData.contractingPartyConfigs[i].enable = 0
                }
            }
        },
        getDetails() {
            this.request({
                url: '/invoice-web-manage/invoice/contracting-party/detail?contractingPartyId='+this.baseData.id,
                method: 'get'
            }).then((res) => {
                this.interactedSystemsId = res.data.interactedSystems
                console.log(this.interactedSystemsId)
                let interactedSystems = []
                res.data.interactedSystems.forEach(item => {
                    interactedSystems.push(item.systemCode)
                })
                this.baseData = {
                    ...res.data,
                    interactedSystems:interactedSystems
                }
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.block-header{
    color: #1ea0ff;
    font-size: 14px;
    padding: 12px 0;
    margin-bottom: 12px;
    background: #f7f7f7;
    &>div{
        padding: 0 12px;
        border-left: 2px solid #1ea0ff;
    }
}
.section-content {
    .el-col-12{
        height: 60px;

    }
    .textareaH{
        height: 150px;
        max-height: 150px;
    }
}
.footer-block{
    text-align: center;
}
</style>
